let { form, $, layer, element, table, upload } = layui;
export default class FilmsManage {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
        <style>
        .size{
            width: 120px;
        }
    </style>
    <table id="filmsTable" lay-filter="filmsTable"></table>
    <script type="text/html" id="tools">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary layui-border-black" lay-event="add">  
                <i class="layui-icon">&#xe654;</i>
                <i class="layui-icon">新增电影</i>
                </button>
            </div>
            <div class="layui-input-inline type size">
            <select name="type" >
                <option value="name">电影名</option>
                <option value="ename">电影英文名</option>
                <option value="type">电影类型</option>
                <option value="area">上映地区</option>
                <option value="year">电影年代</option>
            </select>
            </div>
            <div class="layui-input-inline value">
              <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
            </div>
            <div class="layui-input-inline">
              <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn">
                  <i class="layui-icon">&#xe615;</i>
              </button>
           </div>
        </form>
    </script>
    <script type="text/html" id="filmsBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

   `;
        $("#content").html(template);
    }
    handle() {
        let directorImg = "";
        let actorImg = "";
        let images = "";
        table.render({
            elem: "#filmsTable",//用的id 要加#
            url: "/films",
            toolbar: "#tools",//用的id 要加#
            page: true,
            limit: 20,
            limits: [10, 20, 30, 50],
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态 0
                    "count": res.total, //解析数据长度 总数据条数
                    "data": res.rows //解析数据列表 数据内容
                };
            },
            cols: [
                [
                    //表头
                    {
                        field: "name",
                        width: 150,
                        title: "电影中文名",
                    },
                    {
                        field: "ename",
                        width: 150,
                        title: "电影英文名",
                    },
                    {
                        field: "type",
                        width: 200,
                        title: "类型"
                    },
                    {
                        field: "area",
                        width: 100,
                        title: "上映地区"
                    },
                    {
                        field: "time",
                        width: 100,
                        title: "电影时长"
                    },
                    {
                        field: "upDate",
                        width: 250,
                        title: "上映时间"
                    },
                    {
                        field: "year",
                        sort: "true",
                        width: 80,
                        title: "年代"
                    },
                    {
                        field: "score",
                        sort: "true",
                        width: 80,
                        title: "评分"
                    },
                    {
                        field: "count",
                        sort: "true",
                        width: 100,
                        title: "票房"
                    },
                    {
                        field: "want",
                        sort: "true",
                        width: 100,
                        title: "想看人数"
                    },
                    {
                        field: "intro",
                        width: 350,
                        title: "剧情简介"
                    },
                    {
                        field: "director",
                        width: 350,
                        title: "导演",
                        templet: function (d) {
                            // console.log(d);
                            return d.director ? d.director[0].name : "";
                        }
                    },
                    {
                        field: "actor",
                        width: 350,
                        title: "演员",
                        templet: function (d) {
                            // console.log(d);
                            return d.actor ? `${d.actor[0].name} 饰演: ${d.actor[0].filmName}` : "";
                        }

                    },
                    {
                        field: "images",
                        width: 350,
                        title: "图片"
                    },
                    { fixed: 'right', width: 200, align: 'center', toolbar: '#filmsBar' }
                ],
            ],
        });
        table.on('toolbar(filmsTable)', function (obj) {
            if (obj.event == "add") {
                layer.open({
                    type: 1,
                    title: "新增电影",
                    area: ['500px', '500px'],
                    btn: ['确认新增', '取消'],
                    yes: function (index) {
                        $.ajax({
                            type: "post",
                            url: "/films",
                            data: {
                                images,
                                directorImg,
                                actorImg,
                                ...form.val("addForm")
                            },
                            success() {
                                console.log(form.val("addForm"));
                                table.reload("filmsTable");
                                layer.close(index);
                            }
                        });
                    },
                    success() {
                        form.render();
                        console.log(form.val("addForm"));
                        upload.render({
                            elem: '#directorAddBtn' //绑定元素
                            , url: '/upload' //上传接口
                            , done: function (res) {
                                //上传完毕回调
                                directorImg = res.filename;
                                console.log("res:", res);
                                $("#addDirectorImg").attr("src", "/images/" + res.filename);
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                        upload.render({
                            elem: '#actorAddBtn' //绑定元素
                            , url: '/upload' //上传接口
                            , done: function (res) {
                                //上传完毕回调
                                actorImg = res.filename;
                                console.log("res:", res);
                                $("#addActorImg").attr("src", "/images/" + res.filename);
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                        upload.render({
                            elem: '#AddBtn' //绑定元素
                            , url: '/upload' //上传接口
                            , done: function (res) {
                                //上传完毕回调
                                images = res.filename;
                                console.log("res:", res);
                                $("#addImg").attr("src", "/images/" + res.filename);
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                    },
                    content: `
                    <style>
                        #addDirectorImg,
                        #addActorImg,
                        #addImg {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        }
                        #continueOne,#continueTwo{
                            margin-top: 10px;
                        }
                    </style>
                    <form class="layui-form" lay-filter="addForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影中文名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入电影中文名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影英文名</label>
                            <div class="layui-input-block">
                                <input type="text" name="ename" required lay-verify="required" placeholder="请输入电影英文名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影类型</label>
                            <div class="layui-input-block">
                                <input type="text" name="type" required lay-verify="required" placeholder="请输入电影类型" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映地区</label>
                            <div class="layui-input-block">
                                <input type="text" name="area" required lay-verify="required" placeholder="请输入上映地区" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影时长</label>
                            <div class="layui-input-block">
                                <input type="text" name="time" required lay-verify="required" placeholder="请输入电影时长" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="upDate" required lay-verify="required" placeholder="请输入上映时间" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年代</label>
                            <div class="layui-input-block">
                                <input type="text" name="year" required lay-verify="required" placeholder="请输入年代" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">评分</label>
                            <div class="layui-input-block">
                                <input type="text" name="score" required lay-verify="required" placeholder="请输入评分" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">票房</label>
                            <div class="layui-input-block">
                                <input type="text" name="count" required lay-verify="required" placeholder="请输入票房数" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">想看人数</label>
                        <div class="layui-input-block">
                            <input type="text" name="want" required lay-verify="required" placeholder="请输入想看人数" autocomplete="off"
                                class="layui-input" />
                        </div>
                    </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">剧情简介</label>
                            <div class="layui-input-block">
                                <input type="text" name="intro" required lay-verify="required" placeholder="请输入剧情简介" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">导演</label>
                            <div class="layui-input-block">
                                <input type="text" name="directorName" required lay-verify="required" placeholder="请输入导演姓名"
                                    autocomplete="off" class="layui-input" />
                            </div>
                            <label class="layui-form-label">上传导演图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="directorAddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addDirectorImg" src="" alt="" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">演员姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="actorName" required lay-verify="required" placeholder="请输入演员姓名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                            <br>
                            <label class="layui-form-label">演员饰演名</label>
                            <div class="layui-input-block">
                                <input type="text" name="actorFilmName" required lay-verify="required" placeholder="请输入饰演名"
                                    autocomplete="off" class="layui-input" />
                            </div>
                            <br>
                            <label class="layui-form-label">上传演员图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="actorAddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addActorImg" src="" alt="" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传相关图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="AddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addImg" src="" alt="" />
                            </div>
                        </div>
                    </form>
                    `
                });
            }
            else if (obj.event == "search") {
                table.reload('filmsTable', {
                    where: form.val('searchForm'),

                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }
        })
        //点击修改、删除按钮 工具条事件
        table.on('tool(filmsTable)', function (obj) { //注：tool 是工具条事件名，studentTable 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; // 获得当前行数据，得到学生对象
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch (layEvent) {
                case 'edit':    // 修改
                    layer.open({
                        type: 1,
                        title: '修改电影信息'
                        , area: ['500px', '500px']
                        , data: {
                            id: data._id
                        }
                        , btn: ['确认修改', '取消']
                        , yes: function (index) {
                            $.ajax({
                                type: 'put',
                                url: '/films/' + data._id,
                                data: {
                                    images,
                                    ...form.val('addForm'),
                                },
                                success() {
                                    table.reload("filmsTable");
                                    layer.close(index);
                                }
                            })
                        }
                        , success() {
                            upload.render({
                                elem: '#AddBtn' //绑定元素
                                , url: '/upload' //上传接口
                                , done: function (res) {
                                    //上传完毕回调
                                    images = res.filename;
                                    console.log(images);
                                    console.log("res:", res);
                                    $("#addImg").attr("src", "/images/" + res.filename);
                                }
                                , error: function () {
                                    //请求异常回调
                                }
                            });
                            $.ajax({
                                type: 'get',
                                url: '/films',
                                success() {
                                    form.render();
                                }
                            })
                            let actorName = data.actor[0].name
                            let actorFilmName = data.actor[0].filmName;
                            let directorName = data.director[0].name;
                            console.log(data);
                            console.log(data.actor[0].filmName);
                            form.val('addForm', data); // 信息回填进 layer
                            form.val('addForm', {directorName}); // 信息回填进 layer
                            form.val('addForm', {actorName}); // 信息回填进 layer
                            form.val('addForm', {actorFilmName}); // 信息回填进 layer
                            form.render();
                        }
                        ,content:`<style>
                        #addDirectorImg,
                        #addActorImg,
                        #addImg {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        }
                        #continueOne,#continueTwo{
                            margin-top: 10px;
                        }
                    </style>
                    <form class="layui-form" lay-filter="addForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影中文名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入电影中文名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影英文名</label>
                            <div class="layui-input-block">
                                <input type="text" name="ename" required lay-verify="required" placeholder="请输入电影英文名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影类型</label>
                            <div class="layui-input-block">
                                <input type="text" name="type" required lay-verify="required" placeholder="请输入电影类型" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映地区</label>
                            <div class="layui-input-block">
                                <input type="text" name="area" required lay-verify="required" placeholder="请输入上映地区" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影时长</label>
                            <div class="layui-input-block">
                                <input type="text" name="time" required lay-verify="required" placeholder="请输入电影时长" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="upDate" required lay-verify="required" placeholder="请输入上映时间" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年代</label>
                            <div class="layui-input-block">
                                <input type="text" name="year" required lay-verify="required" placeholder="请输入年代" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">评分</label>
                            <div class="layui-input-block">
                                <input type="text" name="score" required lay-verify="required" placeholder="请输入评分" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">票房</label>
                            <div class="layui-input-block">
                                <input type="text" name="count" required lay-verify="required" placeholder="请输入票房数" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">想看人数</label>
                        <div class="layui-input-block">
                            <input type="text" name="want" required lay-verify="required" placeholder="请输入想看人数" autocomplete="off"
                                class="layui-input" />
                        </div>
                    </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">剧情简介</label>
                            <div class="layui-input-block">
                                <input type="text" name="intro" required lay-verify="required" placeholder="请输入剧情简介" autocomplete="off"
                                    class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">导演</label>
                            <div class="layui-input-block">
                                <input type="text" name="directorName" required lay-verify="required" placeholder="请输入导演姓名"
                                    autocomplete="off" class="layui-input" />
                            </div>
                            <label class="layui-form-label">上传导演图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="directorAddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addDirectorImg" src="" alt="" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">演员姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="actorName" required lay-verify="required" placeholder="请输入演员姓名" autocomplete="off"
                                    class="layui-input" />
                            </div>
                            <br>
                            <label class="layui-form-label">演员饰演名</label>
                            <div class="layui-input-block">
                                <input type="text" name="actorFilmName" required lay-verify="required" placeholder="请输入饰演名"
                                    autocomplete="off" class="layui-input" />
                            </div>
                            <br>
                            <label class="layui-form-label">上传演员图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="actorAddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addActorImg" src="" alt="" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传相关图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="AddBtn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="addImg" src="" alt="" />
                            </div>
                        </div>
                    </form>
                    `
                    });
                    break;
                case 'del': // 删除
                    // 弹出层 点击‘确定’ index 才有值
                    layer.confirm(`是否删除`, { icon: 3, title: '删除' }, function (index) {
                        $.ajax({
                            type: 'delete',
                            url: "/films/" + data._id,
                            success() {
                                table.reload("filmsTable");
                                layer.close(index);
                            }
                        })

                    });
                    break;
            }
        });
    }
}